<template>
  <div class="model-detail-container">
    <!-- 页面标题区域 -->
    <el-page-header @back="goBack" :content="model.name" class="page-header">
    </el-page-header>

    <!-- 活动详情卡片 -->
    <el-card class="model-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="model-name">{{ model.name }}</span>
      </div>

      <div class="model-content">
        <el-row type="flex" :gutter="20" justify="center">
          <!--<el-col :span="8">-->
          <!--  <el-image-->
          <!--      :src="model.avatar"-->
          <!--      :preview-src-list="[model.avatar]"-->
          <!--      class="model-avatar"-->
          <!--      fit="cover">-->
          <!--    <div slot="error" class="image-slot">-->
          <!--      <i class="el-icon-picture-outline"></i>-->
          <!--    </div>-->
          <!--  </el-image>-->
          <!--</el-col>-->

          <el-col :span="16">
            <v-md-editor v-model="model.content" mode="preview" height="auto"></v-md-editor>
          </el-col>
        </el-row>
      </div>

    </el-card>
  </div>
</template>

<script>

import api from "@/api";
import {getCache} from "@/utils/useCache";

export default {
  name: "ActiveDetail",
  data() {
    return {
      model: {
        "name": "加载中...",
        "content": "",
        "start": "",
        "end": "",
        "user": "",
        "avatar": "",
        "date": ""
      }
    };
  },
  mounted() {
    this.fetchNewsDetail();
  },
  methods: {
    // 获取活动详情
    async fetchNewsDetail() {
      const id = this.$route.query.id;
      try {
        const response = await api.model.modelId(id);
        this.model = response.data.data;
      } catch (error) {
        this.$message.error('获取活动详情失败');
        console.error(error);
      }
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    getNewsStatus(model) {
      const now = new Date().getTime();
      const startDate = new Date(model.start).getTime();
      const endDate = new Date(model.end).getTime();

      if (now < startDate) {
        return {text: '即将开始', type: 'upcoming'};
      } else if (now > endDate) {
        return {text: '已结束', type: 'ended'};
      } else {
        return {text: '进行中', type: 'ongoing'};
      }
    },
    // 参加活动
    handleJoin() {
      this.$confirm('确定报名该活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const parse = JSON.parse(this.model.user);
        const id = getCache('USERINFO').id;
        let exist = false;
        for (let i = 0; i < parse.length; i++) {
          const element = parse[i];
          if (element === String(id)) exist = true;
        }
        if (!exist) {
          parse.push(String(id));
          this.model.user = JSON.stringify(parse);
          api.model.modelEditor(this.model).then(r => {
            this.$message.success('报名成功');
            console.log(r);
          })
        } else {
          this.$message.info('您已经报名了');
        }
      }).catch(() => {
      });


    },
    // 分享活动
    handleShare() {
      const currentUrl = window.location.href; // 获取当前页面的URL
      navigator.clipboard.writeText(currentUrl).then(() => {
        this.$message.info('已复制当前活动链接！');
      }).catch(err => {
        console.log(err);
        this.$message.info('分享功能即将上线，敬请期待');
      });
    }
  }
};
</script>

<style scoped>
.model-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.page-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.model-card {
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.model-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.model-name {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.model-date {
  float: right;
  font-size: 14px;
}

.model-content {
  padding: 10px 0;
}

.model-text {
  font-size: 15px;
  line-height: 1.8;
  color: #606266;
  margin-bottom: 20px;
  padding-right: 15px;
}

.model-text >>> img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.model-meta {
  margin-top: 20px;
}

.model-avatar {
  width: 100%;
  height: 300px;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.model-avatar:hover {
  transform: translateY(-5px);
}

.model-footer {
  margin-top: 20px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}
</style>